<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
				font-size: 14px;
			}
			.company_content{
				border: 1px solid rgb(51, 136, 255);
			}
		</style>
	</head>
	<body>
		<!-- <button type="button" onclick="open()">展开/关闭</button> -->
		<svg id="s" width="3700" height="3700" style="overflow-x: scroll;" version="1.1" baseProfile="full"
			xmlns="http://www.w3.org/2000/svg" style="background: #fff">

			<defs>
				<marker fill="rgb(51, 136, 255)" id="arrowhead" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6"
					orient="auto">
					<path d="M 0 0 L 10 5 L 0 10 z" />
				</marker>
				<!-- <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
					<stop offset="0%" stop-color="#ff0000" />
					<stop offset="100%" stop-color="#00ff00" />
				</linearGradient> -->
			</defs>




			<!-- <g transform="translate(700,50)">
				<foreignObject width="80px" height="140px" >
					<div style="width: 76px;height:136px;border:2px solid #000;">
						asd
					</div>
				</foreignObject>
			</g>

			<g transform="translate(460,390)">
				<rect width="80px" height="140px" fill="#fff" stroke-width="2" stroke="rgb(0,0,0)">
			</g>

			<g width="80px" x="610" y="390" height="140px">
				<rect width="80px" height="140px" x="610" y="390" fill="#fff" stroke-width="2" stroke="rgb(0,0,0)">
			</g>

			<g width="80px" x="760" y="390" height="140px">
				<rect width="80px" height="140px" x="760" y="388" fill="#fff" stroke-width="2" stroke="rgb(0,0,0)">
			</g>

			<g width="80px" x="910" y="390" height="140px">
				<rect width="80px" height="140px" x="910" y="388" fill="#fff" stroke-width="2" stroke="rgb(0,0,0)">
			</g>


			<polyline points="740,190 740,290 500,290 500,388" style="fill:white;stroke:#000;stroke-width:2"
				marker-end="url(#arrowhead)" />

			<polyline points="740,190 740,290 650,290 650,388" style="fill:white;stroke:#000;stroke-width:2"
				marker-end="url(#arrowhead)" />

			<polyline points="740,190 740,290 800,290 800,388" style="fill:white;stroke:#000;stroke-width:2"
				marker-end="url(#arrowhead)" />

			<polyline points="740,190 740,290 950,290 950,388" style="fill:white;stroke:#000;stroke-width:2"
				marker-end="url(#arrowhead)" /> -->

		</svg>

	</body>
</html>
<script src="data.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	
	//公司之间的水平边距
	var levelSeparate = 100;
	//公司之间的垂直边距
	var verticalSeparate = 100;
	//公司宽度
	var companyWidth = 100;
	//公司高度
	var companyHeight = 140;
	var status = false;
	
	class Svg {
		constructor(el) {
			this.svg = document.getElementById("s");
		}

		append(element) {
			this.svg.appendChild(element.toElement())
		}
	}

	var SVG_NS = "http://www.w3.org/2000/svg";
	var svg = new Svg("s");

	class Polyline {
		constructor(startX, startY, endX, endY) {
			this.element = document.createElementNS(SVG_NS, "polyline")
			let linePoint1 = startX + "," + startY;
			let linePoint2 = startX + "," + (startY + (verticalSeparate/2));
			let linePoint3 = (endX+(companyWidth/2)) + "," + (startY + (verticalSeparate/2));
			let linePoint4 = (endX+(companyWidth/2)) + "," + endY;
			this.element.setAttribute("points", linePoint1 + " " + linePoint2 + " " + linePoint3 + " " + linePoint4)
			this.element.setAttribute("style", "fill:none;stroke:rgb(51, 136, 255);stroke-width:1");
			this.element.setAttribute("fill-opacity", "0")
			this.element.setAttribute("marker-end", "url(#arrowhead)")
		}

		toElement() {
			return this.element;
		}
	}

	class Company {
		constructor(x, y, txt, w, h) {
			this.height = h != null ? h : 140;
			this.width = w != null ? w : 80;
			this.g = document.createElementNS(SVG_NS, "g")
			this.g.setAttribute("transform", "translate(" + x + "," + y + ")")
			this.g.appendChild(this._createHTML(txt))
			// this.g.appendChild(this._createRect())

		}

		_createRect() {
			let rect = document.createElementNS(SVG_NS, "rect");
			rect.setAttribute("width", companyWidth+"px")
			rect.setAttribute("height", companyHeight+"px")
			rect.setAttribute("fill", "#fff")
			rect.setAttribute("stroke-width", "1")
			rect.setAttribute("stroke", "rgb(0,0,0)");
			return rect;
		}

		_createHTML(txt) {
			let foreignObject = document.createElementNS(SVG_NS, "foreignObject")
			foreignObject.setAttribute("class", "htmlContent")
			foreignObject.setAttribute("width", this.width + "px")
			foreignObject.setAttribute("height", this.height + "px")

			let div = document.createElement("div")
			div.setAttribute("class", "company_content")
			div.setAttribute("style", "width:80px;margin:0 auto;height:" + (this.height - 2) +
				"px;1px solid rgb(51, 136, 255);background:rgb(249, 252, 255);border-radius:3px;color:#333;text-align:center;");
			div.innerHTML = "<span>" + txt + "</span>"

			foreignObject.appendChild(div);
			return foreignObject;
		}

		toElement() {
			return this.g;
		}
	}



	

	//根节点
	var rootX = 1800,
		rootY = 40;

	//一个完整的公司所占有的宽度
	var companyFullWidth = companyWidth;
	
	//根节点
	// svg.append(new Company(rootX, rootY, "根节点"))

	function render(sx, sy, data_list) {
		//计算出第一个公司应该出现的位置
		let x = sx - ((data_list.length * companyFullWidth) / 2-(companyWidth/2));
		let y = sy + companyHeight + verticalSeparate;
		let lineX = sx + (companyWidth / 2);
		let lineY = sy + companyHeight;
		let childrenX,childrenY;

		for (var i = 0; i < data_list.length; i++) {
			let data = data_list[i]
			if(data.parent_name){
				//画公司
				svg.append(new Company(x, y, data.name, companyWidth, companyHeight))
				//划连接线
				svg.append(new Polyline(lineX, lineY, x, y))
				//子集的起点
				childrenX = x;
				childrenY = y;
			}else{
				//画公司
				svg.append(new Company(sx, sy, data.name, companyWidth, companyHeight))
				//子集的起点
				childrenX = sx;
				childrenY = sy;
			}
			
			//画下级元素
			if(data.children){
				render(childrenX,childrenY,data.children)
			}
			//向右偏移出一个公司的宽度，叠加的宽度设置为子级的数量*公司宽度
			x += (companyWidth)
		}
	}
	render(rootX, rootY, company_list);
	
	
	function open(){
		status = !status;
	}
</script>
